class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            name: '',
            id: 0,
            counts: [],
            start: 1,
            pagesize: 15,
            name: "",
            imgsrc: "",

        };
    }

    submit() {
        var { imgsrc } = this.state, imgarr = [],
            that = this, err = '';


        if (imgsrc == "") err = "请添加店铺logo"
        if (err.length > 0) {
            alert(err);
            return
        }


        that.setState({ showloading: 'ON' }, () => {
            imgarr = imgarr.concat(imgsrc)
            that.uploadimg(imgarr)
        })

    }

    componentDidMount() {
        this.setState({ showloading: '' })
        let that = this;
        that.freshlist()

    }

    freshlist() {
        let that = this;
        getSettings(res => {
            this.setState({ showloading: '' })
            if (res.issuccess == 1) {
                let { imgsrc } = this.state,
                    { logo, } = res.data
                imgsrc = `${API_HEAD}imgs/${logo}`

                that.setState({ imgsrc })
            }
        })
    }


    inputchange(prop, e) {
        this.setState({ [prop]: e.target.value })
    }


    // 图片
    filechangeimg(e) {
        var that = this;
        var filedata = $('#file' + e)[0].files[0];
        let _name, _fileName, filedatasize = 10240;

        _name = $('#file' + e)[0].value;
        _fileName = _name.substring(_name.lastIndexOf(".") + 1).toLowerCase();
        if (_fileName !== "png" && _fileName !== "jpg" && _fileName !== "gif" && _fileName !== "jpeg") {
            alert("上传图片格式不正确，请重新上传");
        } else {
            if (filedatasize < filedata.size / 1024) {
                alert("上传图片不能大于10M");
                return;
            }

            let filee = e
            var reader = new FileReader();
            reader.readAsDataURL(filedata);
            reader.onload = function (e) {
                var base64str = e.target.result;
                that.putswiperimglistdata([base64str], filee)
            }
        }
    }
    putswiperimglistdata(target, prop) {
        let imgsrc = '', that = this;
        imgsrc = target[0]
        if (!isBase64(imgsrc)) {
            if (imgsrc.indexOf(`${API_HEAD}`) == -1) {
                imgsrc = `${API_HEAD}imgs/${imgsrc}`

            }
        }

        that.setState({ [prop]: imgsrc })



    }
    clickupload(e) {
        $('#file' + e).click();
    }

    del_img(prop) {
        this.setState({ [prop]: '' })

    }

    // 上传图片
    uploadimg(arr) {
        let uploadimgarr = [],logo="",
            { } = this.state, that = this;
        for (let i = 0; i < arr.length; i++) {
            let x = arr[i]
            if (x.indexOf(`${API_HEAD}`) == -1) {
                if (isBase64(x)) {
                    uploadimg(x, res => {
                        if (res.issuccess == 1) {
                            x = `${API_HEAD}imgs/${res.path}`
                            uploadimgarr.push(x)
                        } else {
                            that.setState({ showloading: '' })
                            alert(res.msg)
                            err = 1
                            return;
                        }
                    })
                }
            } else {
                uploadimgarr.push(x)
            }
        }

        if (uploadimgarr.length == arr.length) {
            uploadimgarr.forEach((x, i) => {
                // if (i == 0) {
                //     imgsrc = x.replace(`${API_HEAD}imgs/`, '')
                // } else {
                logo = x.replace(`${API_HEAD}imgs/`, '')
                // }
            })
            var data = { logo }
            setSettings(data, res => {
                that.setState({ showloading: '' })
                if (res.issuccess == 1) {
                    alert("保存成功");
                } else {
                    alert(res.msg)
                }
            })
        } else {
            that.setState({ showloading: '' })
            alert("图片上传失败")
        }
    }




    render() {
        let { imgsrc, } = this.state;
        return (
            <div className="breadLinebox">
                <Loading hidden={this.state.showloading != 'ON'} />


                <div className='content_wrap panel-default content_wrap'>
                    <div className="breadLine">
                        <div className="">
                            {/* <img src='./src/01.gif' /> */}
                            参数设置
                        </div>
                    </div>
                    <div className="contentbox form">
                        <div className="formcontent">
                            <div>
                                <div className="input-group">
                                    <div className="parametermane">
                                        <span className="red mr5">*</span>
                                        <span>店铺logo</span>
                                        <span className="tips">（图片比例：1:1）</span>
                                    </div>
                                    <div className="mtop10">
                                        <input onChange={this.filechangeimg.bind(this, 'imgsrc')} type='file' id='fileimgsrc' style={{ display: "none" }} />
                                        <div className=''>
                                            <img style={{ display: imgsrc ? "none" : "" }} className='fileimg' src='./src/upload_btn1.png' onClick={this.clickupload.bind(this, 'imgsrc')} />
                                            <div className="imgbox" style={{ display: imgsrc ? "" : "none" }}>
                                                <img src={imgsrc} alt="" className="img" />
                                                <img className='closeimg' onClick={this.del_img.bind(this, 'imgsrc')} src='./src/img_close.png' />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" onClick={this.submit.bind(this)} className="submitbutton">保存</button>


                            </div>

                        </div>

                    </div>
                </div>
            </div>


        )


    }
}





ReactDOM.render(
    <div>
        <TopLine />
        <div id='body'>
            <LeftMenu code='list' height='list' />
            <Main />
        </div>
    </div>
    // <Barrage/>
    , $('.container')[0]
)